<style>
    .message {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:200px}
    .message-read {color: #c2c2c2}
    #frame-message-detail .content {width:280px;height:200px;margin-left:10px;margin-right:10px;display: flex;align-items: center; justify-content: center;}
    #frame-message-detail .content p{word-break:break-all;}
</style>

<div class="layuimini-container">
    <div class="layuimini-main">
        <div id="message_list">
            <!--<li id="message-1" class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">2020-10-22 9:50:50
                        <span class="layui-badge">未读</span>
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" onclick="read(1)"><i class="fa fa-eye"></i> 查看</button>
                    </h3>
                    <p class="message message-read">
                        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
                    </p>
                </div>
            </li>-->
        </div>
        <div id="test1"></div>
    </div>
</div>

<script>
    var total = {$total};
    var easy_admin;

    function getMessageList(page, limit) {
        easy_admin.request.get(
            {
                url: '/manage/member/message/list',
                data: {
                    page: page,
                    limit: limit
                },
            }, function (res) {
                var list = res.data.data.list;
                var html = '';

                list.forEach(v => {
                    html += '<li id="message-' + v.id + '" class="layui-timeline-item">\n' +
                        '                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>\n' +
                        '                <div class="layui-timeline-content layui-text">\n' +
                        '                    <h3 class="layui-timeline-title">' + v.create_time +
                        (v.status===0 ? ' <span class="layui-badge">未读</span>' : '') +
                        ' <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" onclick="read( ' + v.id + ' )"><i class="fa fa-eye"></i> 查看</button>' +
                        '</h3>\n' +
                        '                    <p class="message' + (v.status===1 ? " message-read" : "") + '">\n' + v.msg + '\n' +
                        '                    </p>\n' +
                        '                </div>\n' +
                        '            </li>';
                });
                if (html) {
                    html = '<ul class="layui-timeline">' + html + '</ul>';
                }else html = '<h1>暂无新消息</h1>';

                $('#message_list').html(html);
            }
        );
    }

    function read(id){
        var id_message_li = $('#message-' + id + ' .message');
        var msg = id_message_li.text();
        var html = '<div class="content">\n' +
            '                        <p>\n' +
            '                            ' + msg + '\n' +
            '                        </p>\n' +
            '                    </div>';
        layer.open({
            type: 1
            ,title: false //不显示标题栏
            ,area: ['300px', '200px']
            ,shade: 0.8
            ,id: 'frame-message-detail' //设定一个id，防止重复弹出
            ,moveType: 1 //拖拽模式，0或者1
            ,shadeClose: true
            ,content: html
            ,success: function(layero, index) {
                //是否未读
                if (!id_message_li.hasClass('message-read')) {
                    easy_admin.request.get(
                        {
                            url: '/manage/member/message/read',
                            data: {
                                id: id
                            },
                        }, function (res) {
                            if (res.data.errcode === 0) {
                                //未读数量-1
                                var badge = ($('.message-badge', parent.document).html() - 1 > 0) ? ($('.message-badge', parent.document).html() - 1) : 0;//未读数量
                                $('.message-badge', parent.document).html(badge);
                                //未读标签去除
                                $('#message-' + id + ' span').remove();
                                //文字颜色改变
                                id_message_li.addClass('message-read')
                            }
                        }
                    );
                }
            }
        });
    }
</script>